<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
</head>
<body>
    <div class="container">
    <div class="card">
            <h2>Login</h2>
            <form>
                  <label for="username">Username</label>
                  <input type="text" name="username" id="username" required style="border-radius: 1em;"></input>
                  <label for="password">Password</label>
                  <input type="password" name="password" id="password" required style="border-radius: 1em;"></input>
                  <button type="submit" id="login" onclick="handleLogin()" style="border-radius: 1em;justify-self: center;align-self: center;">Login</button>
              </form>
        </div>
    </div>
</body>
</html>
<script>
function handleLogin() {
    if (localStorage.getItem('token') != "token") { 
        let username = document.querySelector("#username").value;
        let password = document.querySelector("#password").value;
        if(username=="dnrops" && password=="dnrops"){
            localStorage.setItem("token","token");
        }
    }else{
        let originalUrl = localStorage.getItem("originalUrl");
        console.log(originalUrl);
        window.location.href = originalUrl;
    }
}
</script>
<style>
    .container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding-top: 4rem;
    }
    
    .card {
      position: relative;
      width: 400px;
      max-width: 90%;
      padding: 50px 30px;
      transition: all 0.3s ease-in-out;
    }
    
    .card h2 {
      margin-top: 0;
      margin-bottom: 30px;
      text-align: center;
      color: #383e4d;
    }
    
    /* Form styles */
    form {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    
    label {
      margin-bottom: 5px;
      color: #555;
    }
    
    input[type="text"],
    input[type="password"] {
      width: 100%;
      padding: 15px;
      border: none;
      border-bottom: 1px solid #ccc;
      background-color: #f5f5f5;
      color: #555;
      transition: all 0.3s ease-in-out;
      outline: none;
    }
    
    input[type="text"]:focus,
    input[type="password"]:focus {
      border-bottom-color: #888;
      background-color: #e6e6e6;
    }
    
    button[type="submit"] {
      padding: 15px;
      border: none;
      background-color: #383e4d;
      color: white;
      font-size: 16px;
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: 2px;
      cursor: pointer;
      transition: all 0.3s ease-in-out;
    }
    
    button[type="submit"]:hover {
      background-color: #4c535e;
    }
</style>